//@import '../../var';
@import '../../style/theme/index';
@import 'mixin';

@mixin btn(){
  display: inline-block;
  height: 28px;
  line-height: 28px;
  border-radius: 100px;
  padding: 0 12px;
  box-sizing: border-box;
  text-align: center;
  user-select: none;
  position: relative;
  cursor: pointer;
  font-size: 12px;

  & :nth-child(2) {
    margin-left: 6px;
  }
}

@include theme {
  //@debug "$colorPrimary ---- ---- --- #{$colorPrimary}";

  .md-plus {
    &__card {
      width: 100%;
      background-color: white;

      //overflow: hidden; //触发BFC, 防止margin撑不开 //使用这个的话 下面sticky就会有问题 失效
      display: inline-block; //display的值为table-cell、tabble-caption、flex，inline-flex和inline-block 也可以触发bfc, 用在这里比较合适

      box-sizing: border-box;
      margin-bottom: 8px;
      padding: 0 20px 12px;
      border-radius: 4px;
      box-shadow: 0 1px 1px 1px #ccc;

      // 各个card之间没有上下间距, 看起来是一体的(entire)
      @at-root .doc-page-entire & {
        box-shadow: none;
        border: none;
        border-radius: 0;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
      }
    }
  }

  .md-plus-table {
    $width: 120px;

    &--props {
      tr {
        th, td {
          width: $width;

          &:last-child {
            width: initial;
          }
        }
      }
    }

    &--methods, &--events, &--scoped-slots {
      table {
        tr {
          th, td {
            &:nth-child(1) {
              width: $width;
              min-width: $width;
            }
          }

          th, td {
            &:nth-child(2) {
              width: $width*2;
              min-width: $width*2;
            }
          }

          th, td {
            &:last-child {
              width: initial;
            }
          }
        }
      }
    }

    &--slots {
      table {
        tr {
          th, td {
            &:nth-child(1) {
              width: $width;
              min-width: $width;
            }
          }

          th, td {
            &:last-child {
              width: initial;
            }
          }
        }
      }
    }
  }

  .md-plus-case {
    &__h2 {
      display: flex;
      justify-content: space-between;
      align-items: center;

      > span {
        @include anchor();
      }

      &__operator-box {
        font-size: 12px;
        display: inline-block;

        & > span {
          transition: all 300ms linear;
          opacity: 0.15;
          color: #333;

          @include btn();

          &:hover {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
          }

          //鼠标按下不放时的按下效果
          &:active {
            background-color: #f6f6f6;
            top: 1px;
            left: 1px;
          }

          & :nth-child(2) {
            margin-left: 6px;
            //查看代码的icon会180转角
            transition: transform 300ms linear;
          }

          //展开收起代码按钮
          &:last-child {
            //收起时箭头向下
            > * {
              transform: rotate(-90deg);
            }

            //展开时箭头向上
            @at-root .md-plus-case--show-code {
              .md-plus-case__h2__operator-box__toggle {
                :nth-child(2) {
                  transform: rotate(90deg);
                }
              }
            }
          }
        }

        //展开代码时 代码底部的收起按钮
        &__toggle-wrapper {

          //如果展开的代码太长, 我们就不要让收起按钮在最后显示了, 而是始终固定在距离视口下方上面一点点
          //todo 不起作用 貌似
          bottom: 8px;
          position: sticky;

          display: flex;
          align-items: center;
          justify-content: center;

          //阻止用户的点击动作产生任何效果
          //阻止缺省鼠标指针的显示
          //阻止CSS里的hover和active状态的变化触发事件
          //阻止JavaScript点击动作触发的事件
          pointer-events: none;

          .md-plus-case__h2__operator-box__toggle {
            @include btn();

            color: $colorPrimary;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            background-color: white;
            pointer-events: auto;
          }
        }
      }
    }

    //滑入某个case再高亮某个case的按钮组, 这样体验好点
    &:hover {
      .md-plus-case__h2__operator-box {
        & > span {
          opacity: 1;
          color: $colorPrimary;
        }
      }
    }

    //case中要展示的组件的包裹容器
    &__wrapper {
      &--space {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        //case里设置了 space:true
        & > * + * {
          margin-left: 8px !important;
        }
      }

      // 不是一行展示多个, 而是一行展示一个的情况, 这种情况需要上下margin
      &:not(&--space) {
        & > * + * {
          margin-top: 16px !important;
        }
      }

      //类似于 space:true, 不过是手动用 <div class="doc-line"> 对case里要展示的组件进行包裹
      @at-root {
        .doc-line {
          margin-bottom: 8px;
          margin-left: 0;
          display: flex;
          align-items: center;

          & > * {
            & + * {
              margin-left: 8px !important;
            }
          }
        }
      }
    }


    //bottomDesc
    &__desc {
      margin: 16px 0;
    }

    //展开显示的代码
    &-code {
      margin: 16px 0;
    }

  }
}
